<template>
  <div>

    <div class="main">
      <page-title class="page-title" title="药物报表分析" style="margin-bottom: 10px"></page-title>
      <StockReport class="stock-report"></StockReport>
      <el-dialog :title="title" :visible.sync="addDialog" width="55%" :before-close="closeAddDialog">
        <el-form :model="stockInfo" label-width="90px" :rules="addRules" ref="addRef">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item  prop="drugNo" label="药品名称">
                    <el-select v-if="title === '新增库存记录'" v-model="stockInfo.drugNo" @change="selectStock">
                      <el-option
                        v-for="item in notStockList"
                        :key="item.drugNo"
                        :label="item.drugName"
                        :value="item.drugNo">
                      </el-option>
                    </el-select>
                    <el-input v-else :disabled="true" v-model="stockInfo.drugName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="text item">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="药物类型">
                    <el-select :disabled="true" v-model="stockInfo.drugType">
                      <el-option
                        v-for="item in drugTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="title === '编辑'">
                  <el-form-item prop="isAdd" label="库存状态">
                    <el-select v-model="stockInfo.isAdd">
                      <el-option
                        v-for="item in selectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-else>
                  <el-form-item prop="countTotal" label="库存量">
                    <el-input v-model="stockInfo.countTotal" @input="inputCountTotal" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="stockInfo.isAdd && title === '编辑'">
                <el-col :span="12">
                  <el-form-item prop="count" :label="(stockInfo.isAdd === '1' ? '增加' : '减少') + '数目'">
                    <el-input v-model="stockInfo.count" @input="inputCount">
                      <template v-if="stockInfo.isAdd === '1'" slot="append">{{ stockInfo.drugUnit }}</template>
                      <template v-else slot="append">{{ '剩余' + (stockInfo.countTotal - (stockInfo.count ? Math.floor(stockInfo.count) : 0))  +  stockInfo.drugUnit }}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAddDialog">取 消</el-button>
          <el-button type="primary" @click="addStockInfo">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog top="5vh" :title="batchTitle" :visible.sync="batchDialog" width="60%" :before-close="closeBatchDialog">
        <div class="cardBody">
          <div v-for="(row, index) in selectStockList" :key="index" class="cardItem">
            <el-form :model="row" label-width="90px" :rules="addRules" ref="batchRef">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item  prop="drugNo" label="药品名称">
                        <el-select :disabled="isSelect(row.drugNo)" v-if="batchTitle === '批量录入'" v-model="row.drugNo" @change="selectBatchDrug">
                          <el-option
                            v-for="item in notStockList"
                            :key="item.drugNo"
                            :label="item.drugName"
                            :value="item.drugNo"
                            :disabled="isSelect(item.drugNo)">
                          </el-option>
                        </el-select>
                        <el-input v-else :disabled="true" v-model="row.drugName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <div v-if="batchTitle === '批量录入'">
                        <i class="el-icon-remove pointer size-20 removeBtn f-right" @click="removeStockItem(row.drugNo, index)" title="删除"></i>
                        <i v-if="selectStockList.length === (index + 1)" @click="addStockItem" title="增加" class="el-icon-circle-plus pointer size-20 addBtn f-right"></i>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div class="text item">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="药物类型">
                        <el-select :disabled="true" v-model="row.drugType">
                          <el-option
                            v-for="item in drugTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="batchTitle === '批量录入'">
                      <el-form-item prop="countTotal" label="库存量">
                        <el-input v-model="row.countTotal" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"  placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" v-else-if="batchTitle === '批量新增'">
                      <el-form-item prop="countTotal" label="新增数目">
                        <el-input v-model="row.count" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"  placeholder="请输入">
                          <template slot="append">{{ row.drugUnit }}</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" v-else>
                      <el-form-item prop="countTotal" label="减少数目">
                        <el-input v-model="row.count" @focus="batchFocus(index)" @input="batchInputCount"  placeholder="请输入">
                          <template slot="append">{{ '剩余' + (row.countTotal - (row.count ? Math.floor(row.count) : 0))  +  row.drugUnit }}</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-form>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBatchDialog">取 消</el-button>
          <el-button type="primary" @click="submitBatch">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog class="dialog" top="5vh" title="预览" :visible.sync="exportDialog" width="70%" :before-close="handleExportClose">
        <el-table id="selectTable" :data="selectData" height="400px" border>
          <el-table-column align="center" width="150" prop="drugName" show-overflow-tooltip label="药品名称"></el-table-column>
          <el-table-column align="center" show-overflow-tooltip label="药品类型">
            <template slot-scope="scope">
              <span v-if="scope.row.drugType === '1'">西药</span>
              <span v-else-if="scope.row.drugType === '2'">中成药</span>
              <span v-else-if="scope.row.drugType === '3'">中药材</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="售出量">
            <el-table-column sortable :sort-method="sortByJan" align="center" prop="countJan" label="一月"></el-table-column>
            <el-table-column sortable :sort-method="sortByFeb" align="center" prop="countFeb" label="二月"></el-table-column>
            <el-table-column sortable :sort-method="sortByMar" align="center" prop="countMar" label="三月"></el-table-column>
            <el-table-column sortable :sort-method="sortByApr" align="center" prop="countApr" label="四月"></el-table-column>
            <el-table-column sortable :sort-method="sortByMay" align="center" prop="countMay" label="五月"></el-table-column>
            <el-table-column sortable :sort-method="sortByJun" align="center" prop="countJun" label="六月"></el-table-column>
            <el-table-column sortable :sort-method="sortByJul" align="center" prop="countJul" label="七月"></el-table-column>
            <el-table-column sortable :sort-method="sortByAug" align="center" prop="countAug" label="八月"></el-table-column>
            <el-table-column sortable :sort-method="sortBySep" align="center" prop="countSep" label="九月"></el-table-column>
            <el-table-column sortable :sort-method="sortByOct" align="center" prop="countOct" label="十月"></el-table-column>
            <el-table-column sortable :sort-method="sortByNov" align="center" prop="countNov" label="十一月"></el-table-column>
            <el-table-column sortable :sort-method="sortByDec" align="center" prop="countDec" label="十二月"></el-table-column>
          </el-table-column>
          <el-table-column sortable :sort-method="sortBySold" align="center" prop="countSold" show-overflow-tooltip label="总售出数"></el-table-column>
          <el-table-column sortable :sort-method="sortByTotal" align="center" prop="countTotal" show-overflow-tooltip label="库存"></el-table-column>
          <el-table-column align="center" prop="updateName" show-overflow-tooltip label="核验人"></el-table-column>
          <el-table-column align="center" prop="updateTime" show-overflow-tooltip label="核验时间"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="exportExcel">确定保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import PageTitle from '@/components/PageTitle';
  import StockReport from '@/components/StockReport';
  import htmlToExcel from '@/utils/htmlToExcel'
  export default {
    components:{
      Pagination,
      PageTitle,
      StockReport
    },
    data() {
      return {
        stockForm: {},
        stockList: [],
        notStockList: [],
        total: 0,
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
        loading: false,
        drugTypeList: [
          { label: '西药', value: '1'}, { label: '中成药', value: '2'}, { label: '中药材', value: '3'}
        ],
        selectList: [{ value: "1", label: "增加"}, { value: "0", label: "减少"}],
        selectData: [],
        exportDialog: false,
        addDialog: false,
        stockInfo: {},
        addRules: {
          drugNo: [{ required: true, message: '请选择药品', trigger: 'change' }],
          isAdd: [{ required: true, message: '请选择增加库存还是减少库存', trigger: 'change' }],
          count: [{ required: true, message: '请输入录入量', trigger: 'blur' }],
          countTotal: [{ required: true, message: '请输入录入量', trigger: 'blur' }],
        },
        title: '新增库存记录',
        batchTitle: '批量新增',
        batchDialog: false,
        selectStockList: [],
        notSelectStockList: [],
        activeIndex: 0
      }
    },
    created() {
      this.initPage()
    },
    methods: {
      // 导出
      exportExcel() {
        htmlToExcel.getExcel('#selectTable','库存')
      },
      // 关闭导出预览弹窗
      handleExportClose() {
        this.exportDialog = false
      },
      batchReduce() {
        if(this.selectData.length === 0) {
          this.$message.warning("请选择表格中的数据")
          return
        }
        this.selectStockList = Object.assign({}, this.selectData)
        this.notSelectPriceList = []
        this.batchTitle = '批量减少'
        this.batchDialog = true
      },
      submitBatch() {
        if(this.isCanSubmit()) {
          if(this.batchTitle === '批量录入') {
            const drugStockList = this.selectStockList
            this.$postJson('/reg/system/drugStock/addList', drugStockList).then((res) => {
              let resData = res.data
              if(resData.code === 200) {
                this.$message.success("成功")
                this.closeBatchDialog()
                this.initPage()
              } else {
                this.$message.error(resData.msg)
              }
            })
          } else {
            const path = this.batchTitle === '批量新增' ? '/reg/system/drugStock/addStock' : '/reg/system/drugStock/reduceStock'
            const forms = this.selectStockList
            this.$postJson(path, forms).then((res) => {
              let resData = res.data
              if(resData.code === 200) {
                this.$message.success("成功")
                this.closeBatchDialog()
                this.initPage()
              } else {
                this.$message.error(resData.msg)
              }
            })
          }
        } else {
          this.$message.error("请将表单填写完整")
        }
      },
      // 判断是否可以提交
      isCanSubmit() {
        const length = this.selectStockList.length
        let result
        for(var i = 0; i < length; i++) {
          this.$refs['batchRef'][i].validate((valid) => {
            result = valid
            if(!valid) {
              return false
            }
          })
          if(!result) {
            return false
          }
        }
        return true
      },
      batchFocus(index) {
        this.activeIndex = index
      },
      addStockItem() {
        if(this.selectStockList.length === this.notStockList.length) {
          this.$message.warning("没有可以录入库存的药品了~")
          return
        }
        let info = {
          drugNo: '',
          drugType: '',
          isAdd: '',
          countTotal: '',
          count: ''
        }
        this.selectStockList.push(info)
      },
      removeStockItem(val, index) {
        if(this.selectStockList.length === 1) {
          this.$message.error("请至少选择一项")
          return
        }
        const info = this.selectStockList.find(any => any.drugNo === val)
        this.notSelectStockList.push(info)
        this.selectStockList.splice(index, 1)
      },
      selectBatchDrug(val) {
        const type = this.notStockList.find(any => any.drugNo === val).drugType
        this.selectStockList.find(any => any.drugNo === val).drugType = type
      },
      isSelect(val) {
        if(val === '') {
          return false
        }
        if(this.selectStockList.find(any => any.drugNo === val)) {
          return true
        }
      },
      closeBatchDialog() {
        this.batchDialog = false
        setTimeout(() => {
          this.selectStockList = []
          this.notSelectStockList = []
        }, 500)
      },
      inputCountTotal(value) {
        this.stockInfo.countTotal = Math.floor(value.replace(/[^\d.]/g,''));
      },
      batchInputCount(value) {
        if(value === '') {
          return
        }
        this.selectStockList[this.activeIndex].count = Math.floor(value.replace(/[^\d.]/g,''));
        if(Math.floor(this.selectStockList[this.activeIndex].count) > this.selectStockList[this.activeIndex].countTotal) {
          this.$message.error("减少的库存大与库存现有量！")
          this.selectStockList[this.activeIndex].count = ''
        }
      },
      inputCount(value) {
        if(value === '') {
          return
        }
        this.stockInfo.count = Math.floor(value.replace(/[^\d.]/g,''));
        if(this.stockInfo.isAdd === '0') {
          if(Math.floor(this.stockInfo.count) > this.stockInfo.countTotal) {
            this.$message.error("减少的库存大与库存现有量！")
            this.stockInfo.count = ''
          }
        }
      },
      // 选中列表
      handleSelectionChange(val) {
        this.selectData = val
      },
      addStockInfo() {
        this.$refs['addRef'].validate((valid) => {
          if(valid) {
            if(this.title === '新增库存记录') {
              this.$postJson('/reg/system/drugStock/addInfo', this.stockInfo).then((res) => {
                let resData = res.data
                if(resData.code === 200) {
                  this.$message.success("成功")
                  this.closeAddDialog()
                  this.initPage()
                }
              })
            } else if(this.title === '编辑' && this.stockInfo.isAdd === '1') {
              let forms = []
              forms.push(this.stockInfo)
              this.$postJson('/reg/system/drugStock/addStock', forms).then((res) => {
                let resData = res.data
                if(resData.code === 200) {
                  this.$message.success("成功")
                  this.closeAddDialog()
                  this.initPage()
                }
              })
            } else if(this.title === '编辑' && this.stockInfo.isAdd === '0') {
              let forms = []
              forms.push(this.stockInfo)
              this.$postJson('/reg/system/drugStock/reduceStock', forms).then((res) => {
                let resData = res.data
                if(resData.code === 200) {
                  this.$message.success("成功")
                  this.closeAddDialog()
                  this.initPage()
                }
              })
            }
          } else {
            this.$message.error('请将表单填写完整')
          }
        })
      },
      selectStock(val) {
        this.stockInfo.drugType = this.notStockList.find(any => any.drugNo === val).drugType
      },
      closeAddDialog() {
        this.addDialog = false
        this.stockInfo = {}
        this.$refs['addRef'].resetFields();
      },
      sortByJan(obj1, obj2) {
        return obj1.countJan - obj2.countJan
      },
      sortByFeb(obj1, obj2) {
        return obj1.countFeb - obj2.countFeb
      },
      sortByMar(obj1, obj2) {
        return obj1.countMar - obj2.countMar
      },
      sortByApr(obj1, obj2) {
        return obj1.countApr - obj2.countApr
      },
      sortByMay(obj1, obj2) {
        return obj1.countMay - obj2.countMay
      },
      sortByJun(obj1, obj2) {
        return obj1.countJun - obj2.countJun
      },
      sortByJul(obj1, obj2) {
        return obj1.countJul - obj2.countJul
      },
      sortByAug(obj1, obj2) {
        return obj1.countAug - obj2.countAug
      },
      sortBySep(obj1, obj2) {
        return obj1.countSep - obj2.countSep
      },
      sortByOct(obj1, obj2) {
        return obj1.countOct - obj2.countOct
      },
      sortByNov(obj1, obj2) {
        return obj1.countNov - obj2.countNov
      },
      sortByDec(obj1, obj2) {
        return obj1.countDec - obj2.countDec
      },
      sortBySold(obj1, obj2) {
        return obj1.countSold - obj2.countSold
      },
      sortByTotal(obj1, obj2) {
        return obj1.countTotal - obj2.countTotal
      },
      deleteStock(row) {

      },
      editStockInfo(row) {
        this.title = "编辑"
        this.$get(`/reg/system/drugStock/info/${row.drugNo}`).then((res) => {
          let resData = res.data
          if(resData.code === 200) {
            this.stockInfo = resData.data
            this.addDialog = true
          } else {
            this.$message.error(resData.msg)
          }
        })
      },
      exportExcelSelect() {
        if(this.selectData.length === 0) {
          this.$message.warning("请选择表格中的数据")
          return
        }
        this.exportDialog = true
      },
      batchUpdate() {
        if(this.selectData.length === 0) {
          this.$message.warning("请选择表格中的数据")
          return
        }
        this.selectStockList = Object.assign({}, this.selectData)
        this.notSelectPriceList = []
        this.batchTitle = '批量新增'
        this.batchDialog = true
      },
      batchAdd() {
        if(this.notStockList.length > 0) {
          this.batchTitle = '批量录入'
          this.batchDialog = true
          Object.assign(this.selectStockList, this.notStockList)
          this.notSelectStockList = []
        } else {
          this.$message.warning("没有需要录入的药物")
        }
      },
      initPage() {
        this.getNotStockList()
        this.loading = true;
        const params = {...this.stockForm};
        params.pageNum = this.pagination.pageNum;
        params.pageSize = this.pagination.pageSize;
        this.$postJson('/reg/system/drugStock/list', params).then(res => {
          if(res.data.code === 200) {
            this.total = res.data.data.totalSize
            this.stockList = res.data.data.content
          } else {
            this.$message.error(res.data.msg)
          }
          this.loading = false;
        })
      },
      getNotStockList() {
        this.$get('/reg/system/drugStock/notStockList').then((res) => {
          let resData = res.data
          if(resData.code === 200) {
            this.notStockList = resData.data
          } else {
            this.$message.error(resData.msg)
          }
        })
      },
      handleStockSearch() {
        this.initPage()
      },
      clearForm() {
        this.stockForm = {}
        this.initPage()
      },
      insertStock() {
        this.stockInfo = {}
        this.title = '新增库存记录'
        this.addDialog = true
      },
      handlePageChange() {
        this.initPage()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .alert {
    >>> .el-alert__description {
      display: initial;
    }
  }
  .alertText {
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    cursor: pointer;
    text-decoration: underline;
  }
  .main {
    padding: 10px 20px;
    height: 100%;
  }
  .dialog {
    >>> .el-dialog__header {
      background-color: #efefef;
      border-bottom: 1px solid #e5e5e5;
    }
    >>> .el-form {
      padding-right: 10px;
    }
    >>> .bottom-button {
      margin-left: -60px;
    }
  }
  .drugInfoForm , .departForm {
    .el-row >>> .el-cascader {
      width: 100% ;
    }
    .el-row >>> .el-select {
      width: 100% ;
    }
  }
  .width-100 {
    width: 100px !important;
  }
  .prog {
    color: #66b1ff;
    cursor: pointer;
  }
  .prog:hover {
    color: #409eff;
  }
  .link {
    cursor: pointer;
    color: #66b1ff;
    font-weight: bold;
  }
  .link:hover {
    color: #409eff;
    text-decoration: underline;
  }
  .bold {
    font-weight: bold;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%
  }
  .clearfix {
    >>> .el-form-item {
      margin-bottom: 0px;
    }
    >>> .el-select {
      width: 100%;
    }
  }
  .cardItem {
    margin-bottom: 10px;
  }
  .cardBody {
    height: 500px;
    overflow: auto;
    padding: 10px;
    border: 1px solid #EBEEF5;
  }
</style>
